<template>
    <div>
        <!-- 头部 -->
        <van-nav-bar>
            <template #left>
                <span class="iconfont iconnew indexIconNew"></span>
            </template>
            <template #title>
                <div class="search" @click="$router.push('/search')">
                    <van-icon name="search" color="#fff" size="18" />
                    <span>搜索商品</span>
                </div>
            </template>
            <template #right>
                <van-icon name="manager-o" size="25" color="#fff" />
            </template>
        </van-nav-bar>
        <!-- 内容 -->
        <!-- 导航 -->
        <van-tabs v-model="curIndex" @change="tabChange">
            <van-tab v-for="item in categoryList" 
            :title="item.name" :key="item.id">
            <van-icon name="plus" @click="toCategory" />
            <!-- 
                上拉加载组件list
                v-model：绑定的变量表示当前数据是否加载完成，false表示加载完成，true表示没有加载完成
                finished：表示是否已经加载完所有数据（也就是数据库中的数据全部加载完了），true表示加载完了
                finished-text：设置加载完所有数据后的提示内容
                load：表示加载中触发的事件
                immediate-check: 值为false表示关闭load事件自动触发
                offset:	滚动条与底部距离小于 offset 时触发load事件
             -->
                <van-list v-model="loading" :finished="finished" 
                finished-text="没有更多了" @load="onLoad"
                offset="100"
                :immediate-check="false">
                    <!-- 
                        下拉刷新组件pull-refresh
                        v-model：绑定的变量表示，是否刷新完成
                        refresh：表示下拉刷新时会触发的一个事件
                    -->
                    <van-pull-refresh v-model="isLoading" 
                    @refresh="onRefresh">
                        <!-- 
                            新闻列表 
                            默认情况下，自定义组件上不能绑定原生的事件，
                            此刻我们就是想要绑定怎么办 ？
                            答：可以通过一个事件修饰符解决这个问题 native
                        -->
                        <newsItem v-for="item in newsList" 
                        :news="item" :key="item.id" @click.native="toDetail(item.id)">
                        </newsItem>
                    </van-pull-refresh>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import newsItem from "@/components/newsItem.vue"
import { category } from "@/api/common.js"
import { getNewsList } from "@/api/news.js"
export default {
    components: {newsItem},
    data(){
        return {
            categoryList: [],
            curIndex: this.$route.meta.curIndex,  // 默认展示头条的数据 表示当前栏目的下标值
            newsList: [],       // 新闻列表
            isLoading: false,   // 控制是否下拉刷新完成
            pageIndex: 1,       // 当前页数
            pageSize: 10,       // 每页的数据数量，在这里是不需要改变的
            loading: false,     // 表示是否加载完成
            finished: false,    // 表示是否把所有数据加载完  
        }
    },
    created(){
        // 通过频道管理控制首页的栏目列表展示
        // 栏目类别需要从“频道管理”中获取，（从缓存中获取）
        let defaultCategory = localStorage.getItem("defaultList")&&JSON.parse(localStorage.getItem("defaultList"))||[];
        if(defaultCategory.length > 0){
            //缓存中存在栏目 栏目列表从缓存中获取
            let list = JSON.parse(localStorage.getItem("list-70"));
            this.categoryList = [...defaultCategory,...list];
            // 获取新闻列表（根据栏目id获取新闻列表）
            this.getNews()
        }else{
            // 栏目列表从接口中获取
            // 获取栏目列表并保存
            category().then(res=>{
                // console.log(36,res);
                this.categoryList = res.data.data;
                // 获取新闻列表（根据栏目id获取新闻列表）
                this.getNews()
            })
        }

    },
    methods: {
        // 跳转到频道管理页面
        toCategory(){
            this.$router.push("/category")
        },
        //点击栏目是触发的函数
        tabChange(name){
            // name: 默认就是栏目的下标值
            console.log(name);
            this.newsList = [];
            this.pageIndex = 1; // 解决刷新获取到非第一页数据问题
            this.finished = false;

            // this.curIndex = name;
            // 将当前栏目的下标值赋值给当前路由元信息上的curIndex
            this.$route.meta.curIndex = name;
            // 获取新闻列表
            this.getNews();
        },
        // 点击新闻列表项，跳转到对应的文章详情页面
        toDetail(id){
            // console.log(88,id);
            this.$router.push({
                path: "/articleDetail",
                query: {
                    id: id
                }
            })
        },
        // 上拉加载会触发的函数
        onLoad(){
            console.log("正在加载中");
            // 获取下一页的数据
            this.pageIndex++;
            this.getNews();
        },
        // 下拉刷新时会触发的函数
        onRefresh(){
            // 刷新功能，就是重新获取一下新闻列表数据即可
            this.newsList = []; // 解决key值(数据)重复问题
            this.pageIndex = 1; // 解决刷新获取到非第一页数据问题
            this.finished = false;// 解决上拉加载完成后finished变为true后，重新下拉刷新导致获取不到下一页数据问题
            this.getNews();
        },
        // 获取新闻列表函数
        getNews(){
            getNewsList({
                category: this.categoryList[this.curIndex].id,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize
            }).then(res=>{
                // console.log(51,res);
                // 合并数组,方法有2中，通过扩展运算符进行合并，同concat方法进行合并
                // this.newsList = [ ...this.newsList,...res.data.data];
                this.newsList = this.newsList.concat(res.data.data)
                // 数据成功请求回来后需要把isLoading改为false
                this.isLoading = false;
                // 数据请求成功后把上拉加载的loading改为false
                this.loading = false;
                // 当所有数据加载完成后把finished改为true
                // 那如何判断所有数据已经加载完成了呢（已经没有更多数据了呢）？
                // 答：当请求回来的数据数量少于我们请求的数据数量的时候，就说明已经没有更多数据了
                if(res.data.data.length<this.pageSize){
                    this.finished = true;
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.van-nav-bar{
    background-color: #ff0000;
    .indexIconNew{
        font-size: 50px;
        color: white;
    }
    .van-nav-bar__title{
        width: 60%;
        .search{
            width: 100%;
            height: 38px;
            background-color: rgba(255,255,255,0.4);
            border-radius: 20px;
            text-align: center;
            line-height: 38px;
            color: #fff;
            span{
                margin-left: 5px;
            }
        }
    }

}
.van-tabs{
    position: relative;
    .van-icon{
        position: absolute;
        right: 0;
        top: 0;
            font-size: 20px;
    height: 44px;
    line-height: 36px;
    width: 44px;
    text-align: center;
    background: #fff;
    }
}
/deep/.van-tabs--line .van-tabs__wrap{
    padding-right: 44px;
}
</style>